<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Group</title>
    <link rel="stylesheet" href="../../model/element.css">
    <link rel="stylesheet" href="../../model/jsFn.css">
</head>
<body>
<div class="catalog">
    <h1>目录</h1>
    <ul>
        <li>
            <p><a href="#element">< group ></a></p>
        </li>
        <li>
            <p><a href="#attribute">属性</a></p>
            <ul>
                <li><p><a href="#example">实例</a></p></li>
                <li><p><a href="#optional">可选属性</a></p></li>
                <li><p><a href="#note">提示和注释</a></p></li>
                <li><p><a href="#sketch">效果图</a></p></li>
            </ul>
        </li>
        <li>
            <p><a href="#jsFn">js函数</a></p>
            <ul>
                <li><p><a href="#jsFn_set">set</a></p></li>
                <li><p><a href="#jsFn_get">get</a></p></li>
                <li><p><a href="#jsFn_init">init</a></p></li>
            </ul>
        </li>
        <li>
            <p><a href="#childElement">子标签</a></p>
            <ul>
                <li>
                    <p><a href="#childElement_button">button</a></p>
                </li>
            </ul>
        </li>
    </ul>
</div>
<div id="element">
    <h2>Group style-1</h2>
    <div>
        <p>简介:</p>
        <p>最常用标签,多用于网格布局的按钮</p>
    </div>
</div>
<div id="attribute">
    <h2>属性</h2>
    <div style="margin-left: 25px" id="example">
        <h3>实例:</h3>
        <xmp>
            <group p-font="20" lp-font="12" img-attr="30,30" height="50" num="3">
                <button>
                    <tp>上面的文字</tp>
                    <img>xxx.png</img>
                    <bp>下面的文字</bp>
                    <lp>左边</lp>
                    <rp font="23">右边</rp>
                </button>
                <button>
                    <tp font="#00ff00">上面的文字</tp>
                    <img>xxx.png</img>
                    <bp>下面的文字</bp>
                    <lp>左边</lp>
                    <rp>右边</rp>
                </button>
            </group>
        </xmp>
    </div>
    <div id="optional">
        <h3>可选属性:</h3>
        <table>
            <tbody>
            <tr>
                <th>属性</th>
                <th>值</th>
                <th>描述</th>
            </tr>
            <tr>
                <td>num</td>
                <td>int</td>
                <td>默认为4,代表一行有几列button</td>
            </tr>
            <tr>
                <th>ElementName-attributeKey</th>
                <th>attributeValue</th>
                <th>group统一管理子标签属性,若子标签已有改属性,则以子标签为准,
                    ElementName:标签名;
                    -:链接符,必须;
                    attributeKey:属性名;
                    <br/>例子: lp-font:'12,#568945':给group标签下所有的lp标签赋值font属性;

                </th>
            </tr>
            </tbody>
        </table>
    </div>
    <div id="note">
        <h3>提示和注释:</h3>
        <p>默认style-1</p>
        <p>height属性为必填属性</p>
    </div>
    <div id="sketch">
        <h3>效果图:</h3>
        <img src="img/group-style1.png" alt="">
    </div>
</div>
<div id="jsFn">
    <h2>JS方法</h2>
    <div class="jsFnModel" id="jsFn_set">
        <h3>set</h3>
        <div class="shape">
            <h3>函数使用样式</h3>
            <p>group.set(args) -> group;</p>
        </div>
        <div class="profile">
            <h3>函数功能简介</h3>
            <p>指定特定的标签,给其赋值,包括文本,颜色,大小,图片路径</p>
        </div>
        <div class="version">
            <p>稳定性;2 - 稳定的</p>
            <p>新增于:v0.0.0</p>
        </div>
        <div class="params">
            <h3>参数列表:</h3>
            <ul>
                <li>
                    <p>args</p>
                    <p>&nbsp;object&nbsp;</p>
                    <p>
                        格式为:{item:0,button:{background:'#d1d1d1'},img:{img:'http://xxx.jpg',click:'document.finish();',corner:'2'},p:{p:'修改后文字',font:'#ff0000,12,centerline,ture'},bp:{p:'修改后文字'},lp:{p:'修改后文字'},rp:{p:'修改后文字'}};
                        <br/>
                        代表含义为：item:指定修改的是第几个item;
                        <br/>
                        button:设置button标签的属性,button.background:背景色;
                        <br/>
                        img.img:图片路径,img.click:点击事件,img.corner:图片上的角标;
                        <br/>
                        p:中间区域的p标签;
                        <br/>
                        tp:图片上方的p标签p.font:同font属性,p.p:更改后的文字;
                        <br/>
                        bp:有图片的情况下图片下方第一个p标签，其他与p相同;
                        <br/>
                        lp:左边第一个lp标签，其他与p相同;
                        <br/>
                        rp:右边第一个rp标签，其他与p相同;
                        <br/>
                        若指定子标签不存在,则不执行操作
                    </p>
                </li>
            </ul>
        </div>
        <div class="res">
            <h3>返回值:</h3>
            <p>group</p>
            <p>返回group本身</p>
        </div>
        <div class="code">
            <h3>例子</h3>
            <pre>
            <code>
                < group  button="h50" num="1"  id="group" >
                    < button >
                        < p > 修改前文字 < /p >
                    < /button >
                < /group >
                document.$('group').set({item:0,button:{background:'#d1d1d1'},p:{p:'修改后文字'}});
            </code>
        </pre>
        </div>
        <div class="error">
            <h3>抛出错误</h3>
        </div>
    </div>
    <div class="jsFnModel" id="jsFn_get">
        <h3>get</h3>
        <div class="shape">
            <h3>函数使用样式：</h3>
            <p>group.get(index,elementName) -> string</p>
        </div>
        <div class="profile">
            <h3>函数功能简介</h3>
            <p>获得group标签下指定子标签的文本或都图片的路径</p>
        </div>
        <div class="version">
            <p>稳定性;2 - 稳定的</p>
            <p>新增于:v0.0.0</p>
        </div>
        <div class="params">
            <h3>参数列表:</h3>
            <ul>
                <li>
                    <p>index</p>
                    <p>&nbsp;int&nbsp;</p>
                    <p>第一个button里的标签</p>
                </li>
                <li>
                    <p>elementName</p>
                    <p>&nbsp;string&nbsp;</p>
                    <p>
                        p,rp,bp,lp,tp:获得指定p标签的文本信息
                        <br/>
                        img:img标签中的内容(路径或者图片的URL)
                    </p>
                </li>
            </ul>
        </div>
        <div class="res">
            <h3>返回值:</h3>
            <p>String</p>
            <p>返回指定标签展示的文本信息或者图片的路径</p>
        </div>
        <div class="code">
            <h3>例子</h3>
            <pre>
            <code>
                < group  button="h50" num="1"  id="group" >
                    < button >
                        < p > 文字 < /p >
                    < /button >
                < /group >
                let pText = document.$('group').get(0,p);
                console.log('p',pText);
                //控制台打印  p:文字;
            </code>
        </pre>
        </div>
        <div class="error">
            <h3>抛出错误</h3>
        </div>
    </div>
    <div class="jsFnModel" id="jsFn_init">
        <h3>init</h3>
        <div class="shape">
            <h3>函数使用样式</h3>
            <p>group.init([element]) -> void</p>
        </div>
        <div class="profile">
            <h3>函数功能简介</h3>
            <p>将控件初始化到最初的状态</p>
        </div>
        <div class="version">
            <p>稳定性;2 - 稳定的</p>
            <p>新增于:v0.0.0</p>
        </div>
        <div class="params">
            <h3>参数列表:</h3>
            <ul>
                <li>
                    <p>element</p>
                    <p>&nbsp;object&nbsp;</p>
                    <p> 初始后对控件进行设置，相当于调用set(element) </p>
                </li>
            </ul>
        </div>
        <div class="res">
            <h3>返回值:</h3>
            <p>void</p>
            <p>无返回值</p>
        </div>
        <div class="code">
            <h3>例子</h3>
            <pre>
            <code>
                < group  button="h50" num="1"  id="group" >
                    < button >
                        < p > 修改前文字 < /p >
                    < /button >
                < /group >
                document.$('group').init({item:0,button:{background:'#d1d1d1'},p:{p:'修改后文字'}});
            </code>
        </pre>
        </div>
        <div class="error">
            <h3>抛出错误</h3>
        </div>
    </div>
</div>
<div id="childElement">
    <h2>子标签</h2>
    <div id="childElement_button">
        <h3>button</h3>
        <p>用于group内部显示内容</p>
        <p>用法参见 <a href="../group/button.html">< button ></a></p>
    </div>
</div>
<div class="author">
    <p>by-沛华</p>
</div>
</body>
</html>